import React, {Component} from 'react';
import {NavLink} from "react-router-dom";
// 引入Table组件
import Table from "../Public/Table";
// http对象
import http from '../../http'

// 商品管理的表格
class ProductTable extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// 表格的数据展示方法  title定义表头，width定义宽度，props定义数据属性名，render方法返回展示内容
			columns: [
				{
					title: 'id',
					width: '5%',
					props: 'id'
				},
				{
					title: '信息',
					width: '60%',
					render: data => <div>
						<p>{data.name}</p>
						<p>{data.subtitle}</p>
					</div>
				},
				{
					title: '价格',
					width: '10%',
					props: 'price'
				},
				{
					title: '状态',
					width: '15%',
					render: data => {
						// 判断当前数据的状态值，如果是上架状态的话显示下架按钮，否则是下架状态，显示上架按钮
						if (data.status === 1) {
							return (
								<div>
									<span>在售</span>
									{/*下架按钮，传入id */}
									<button
										className="btn btn-xs btn-warning"
										onClick={() => this.soldOut(data.id)}
									>下架
									</button>
								</div>
							)
						} else {
							return (
								<div>
									<span>已下架</span>
									{/*上架按钮，传入id */}
									<button
										className="btn btn-xs btn-primary"
										onClick={() => this.putaway(data.id)}
									>上架
									</button>
								</div>
							)
						}
					}
				},
				{
					title: '操作',
					width: '10%',
					// 定义查看和编辑按钮路由跳转
					render: data => <div>
						<NavLink to={"/product/detail/" + data.id}>查看</NavLink>
						<NavLink to={"/product/save/" + data.id}>编辑</NavLink>
					</div>
				}
			]
		}
	}

	// 下架功能，传入id
	soldOut = id => {
		// 弹出confirm框
		let soldOutFlag = window.confirm('确认要下架该商品？');
		// 如果点击的是确定的话，返回true
		if (soldOutFlag) {
			// 调用http对象的下架方法，传入id
			http.soldOut(id).then(res => {
				// 修改成功重新获取商品管理列表的数据
				alert(res.data);
				this.props.getProductList()
			})
		}
	};

	// 上架功能，传入id
	putaway = id => {
		// 弹出confirm框
		let soldOutFlag = window.confirm('确认要上架该商品？');
		// 如果点击的是确定的话，返回true
		if (soldOutFlag) {
			// 调用http对象的上架方法，传入id
			http.putaway(id).then(res => {
				// 修改成功重新获取商品管理列表的数据
				alert(res.data);
				this.props.getProductList()
			})
		}
	};

	render() {
		return (
			// 调用Table组件，传入data数据，columns是表格配置，keyProps是表格的key值
			<Table
				data={this.props.list}
				columns={this.state.columns}
				keyProps="id"
			/>
		);
	}
}

export default ProductTable;